#app {
  .topInfo {
    width: 97%;
    background: #f2f2f2;
    padding: 10px 20px;
    font-size: 18px;

    &::before {
      position: absolute;
      content: '';
      background: #2fb9d4;
      width: 8px;
      height: 40px;
      margin-top: -10px;
      margin-left: -20px;
    }

    .branchid {
      color: #008080;
      font-weight: bolder;
    }
  }

  .branchInfo {
    width: 100%;
    margin: 10px 0;
    display: flex;

    .branchItem {
      display: flex;
      width: 33%;
      justify-content: space-around;
      padding: 10px 0;
      background: #f2f2f2;
      align-items: center;
      margin-right: 20px;

      .left {
        div {
          width: 80px;
          height: 80px;
          border-radius: 50%;

          img {
            padding: 10px;
          }
        }

      }

      .right {
        color: #f36f8a;
        text-align: center;

        .count {
          font-size: 32px;
          margin-bottom: 5px;
        }

        .count:hover {
          color: #23262e;
          cursor: pointer;
        }

        .name {
          font-size: 14px;
          font-weight: bolder;
        }

        .name:hover {
          color: #23262e;
          cursor: pointer;
        }
      }

      &:last-child {
        margin: 0;
      }
    }
  }

  fieldset {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    color: #666666;

    .legend {
      font-size: 26px;
    }

    .grid-content {
      padding: 5px;
      height: 400px;
      //width: 100%;

      .title {
        line-height: 30px;

        &::before {
          position: absolute;
          content: '';
          background: #2fb9d4;
          width: 4px;
          height: 30px;
          margin-left: -15px;
        }
      }
    }
  }
}